<template>
<UserManagement  v-if="chartVisible" :changeChartVisible="changeChartVisible" />
  <el-dropdown>
    <span class="el-dropdown-link">
      {{ username }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="logout" >退出登录</el-dropdown-item>
        <el-dropdown-item @click="chartVisible = true" v-if="type==='admin'">用户管理</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import UserManagement from "./UserManagement.vue";
let $router = useRouter();
const username = localStorage.getItem("username");
const chartVisible = ref(false)
const changeChartVisible = () => {
  chartVisible.value = false
}
const type = localStorage.getItem("type")
function logout() {
  $router.push("/login");
  localStorage.removeItem("username");
  localStorage.removeItem("type");
  localStorage.removeItem("token");
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 15px;
  :deep(:focus-visible) {
    outline: none !important;
  }
}
</style>
